<template>
  <div class="container">
    <el-dialog
      :title="
        dialog.dialogType === 'edit' ? '修改商超供应商' : '创建商超供应商'
      "
      :visible.sync="dialog.centerDialogVisible"
      width="900px"
      center
      :lock-scroll="true"
      :before-close="hideDialog"
      @open="getData"
    >
      <el-form
        ref="form"
        class="formList"
        :model="formData"
        label-width="130px"
        label-position="left"
        :rules="rules"
      >
        <div>
          <el-form-item label="供应商名称：" prop="supplier_name">
            <el-input
              v-model="formData.supplier_name"
              placeholder="请输入供应商名称"
            />
          </el-form-item>

          <el-form-item label="供应商编码：" prop="supplier_code">
            <el-input
              :disabled="dialog.dialogType === 'edit'"
              v-model="formData.supplier_code"
              placeholder="请输入供应商编码"
            />
          </el-form-item>
          <el-form-item label="经营模式：" prop="mode">
            <el-select v-model="formData.mode" placeholder="请选择经营模式">
              <el-option
                v-for="item in modeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算方式：" prop="payment">
            <!-- <el-input v-model="formData.payment" placeholder="请输入结算方式" /> -->
            <el-select v-model="formData.payment" placeholder="请选择结算方式">
              <el-option
                v-for="item in paymentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账期方式：" prop="payment_type">
            <!-- <el-input v-model="formData.payment_type" placeholder="请输入账期方式" /> -->
            <el-select
              v-model="formData.payment_type"
              placeholder="请选择账期方式"
            >
              <el-option
                v-for="item in payment_typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账期天数：">
            <el-input
              v-model="formData.payment_days"
              placeholder="请输入账期天数"
            />
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="formData.status" placeholder="请选择状态">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商类型：" prop="type">
            <el-select v-model="formData.type" placeholder="请选择供应商类型">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商性质：" prop="property">
            <el-select
              v-model="formData.property"
              placeholder="请选择供应商性质"
            >
              <el-option
                v-for="item in propertyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input v-model="formData.contacts" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="电话：">
            <el-input v-model="formData.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="传真：">
            <el-input v-model="formData.fax" placeholder="请输入传真" />
          </el-form-item>
          <el-form-item label="手机：">
            <el-input v-model="formData.mobile" placeholder="请输入手机" />
          </el-form-item>
          <el-form-item label="返点比例：">
            <el-input-number
              v-model="formData.postcode"
              :controls="false"
              :min="0"
              :max='100'
              :precision="2"
              label="请输入返点比例"
            ></el-input-number>
            %
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="地址：">
            <el-input v-model="formData.address" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input
              v-model="formData.address_detail"
              placeholder="请输入详细地址"
            />
          </el-form-item>
          <el-form-item label="国家：">
            <el-input v-model="formData.country" placeholder="请输入国家" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="开户人姓名：">
            <el-input
              v-model="formData.bank_account_name"
              placeholder="请输入开户人姓名"
            />
          </el-form-item>
          <el-form-item label="开户行：">
            <el-input v-model="formData.bank" placeholder="请输入开户行" />
          </el-form-item>
          <el-form-item label="银行账号：">
            <el-input
              v-model="formData.bank_account"
              placeholder="请输入银行账号"
            />
          </el-form-item>
          <el-form-item label="税务登记号：">
            <el-input
              v-model="formData.taxpayer"
              placeholder="请输入税务登记号"
            />
          </el-form-item>
          <el-form-item label="营业执照：">
            <el-input
              v-model="formData.business_license"
              placeholder="请输入营业执照"
            />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="formData.remarks"
              type="textarea"
              placeholder="请输入备注"
            />
          </el-form-item>
          <el-form-item label="对账账号编码：">
            <el-input
              v-model="formData.operator_code"
              placeholder="请输入对账账号编码"
            />
          </el-form-item>
          <el-form-item label="对账账号名称：">
            <el-input
              v-model="formData.operator_name"
              placeholder="请输入对账账号名称"
            />
          </el-form-item>
          <el-form-item label="送货周期：">
            <el-input-number
              v-model="formData.send_period"
              :min="0"
              label="请输入送货周期"
            ></el-input-number>
            <!-- <el-input v-model="formData.send_period" placeholder="请输入送货周期" /> -->
          </el-form-item>
          <el-form-item label="联营保底金额：">
            <el-input-number
              v-model="formData.lybo_money"
              :precision="2"
              :step="0.01"
              label="请输入联营保底金额"
            ></el-input-number>
            <!-- <el-input v-model="formData.lybo_money" placeholder="请输入联营保底金额" /> -->
          </el-form-item>
          <el-form-item label="采购单据进价：">
            <el-input-number
              v-model="formData.buy_in_price"
              :precision="2"
              :step="0.01"
              label="请输入联营保底金额"
            ></el-input-number>
            <!-- <el-input v-model="formData.buy_in_price" placeholder="请输入采购单据进价" /> -->
          </el-form-item>
          <el-form-item label="返利方式：">
            <el-input
              v-model="formData.rebate_type"
              placeholder="请输入返利方式"
            />
          </el-form-item>
          <el-form-item label="助记码：">
            <el-input v-model="formData.zj_number" placeholder="请输入助记码" />
          </el-form-item>
          <el-form-item label="付款方式：">
            <el-input
              v-model="formData.pay_type"
              placeholder="请输入付款方式"
            />
          </el-form-item>
          <el-form-item label="区域：">
            <el-select
              v-model="formData.area"
              filterable
              remote
              center
              reserve-keyword
              placeholder="请输入区域"
              :remote-method="insideRemoteMethods"
              :loading="insideArea.loading"
              @change="getAreaData(formData.area)"
            >
              <el-option
                v-for="item in insideArea.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="供应商分类编码：">
            <el-input
              v-model="formData.supplierclass_code"
              placeholder="请输入供应商分类编码"
            />
          </el-form-item>
          <el-form-item label="供应商分类名称：">
            <el-input
              v-model="formData.supplierclass_name"
              placeholder="请输入供应商分类名称"
            />
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addSuppliers,
  editSuppliers,
  findSuppliers,
  getRegionData
} from "@/api/supplier/supplierList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      rules: {
        payment: [
          { required: true, message: "请选择结算方式", trigger: "change" }
        ],
        payment_type: [
          { required: true, message: "请选择账期方式", trigger: "change" }
        ],
        supplier_name: [
          { required: true, message: "请填写供应商名称", trigger: "blur" }
        ],
        supplier_code: [
          { required: true, message: "请填写供应商编码", trigger: "blur" }
        ],
        mode: [
          { required: true, message: "请选择经营模式", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选供应商类型", trigger: "change" }
        ],
        property: [
          { required: true, message: "请选择供应商性质", trigger: "change" }
        ]
      },
      formData: {
        supplier_name: "",
        supplier_code: "",
        mode: "",
        payment: "",
        payment_type: "",
        payment_days: "",
        status: "",
        type: "",
        property: "",
        contacts: "",
        tel: "",
        fax: "",
        mobile: "",
        postcode: "",
        email: "",
        bank_account_name: "",
        bank: "",
        bank_account: "",
        taxpayer: "",
        business_license: "",
        remarks: "",
        operator_code: "",
        operator_name: "",
        orgarea_code: "",
        orgarea_name: "",
        area: "",
        supplierclass_code: "",
        supplierclass_name: "",
        address: "",
        address_detail: "",
        country: "",
        send_period: "",
        lybo_money: "",
        rebate_type: "",
        buy_in_price: "",
        zj_number: "",
        pay_type: ""
      },
      insideArea: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      paymentList: [
        {
          value: 0,
          label: "账期"
        },
        {
          value: 1,
          label: "货到付款"
        },
        {
          value: 2,
          label: "指定日期"
        },
        {
          value: 3,
          label: "临时指定"
        },
        {
          value: 4,
          label: "指定账期"
        }
      ],
      payment_typeList: [
        {
          value: 0,
          label: "D+N"
        }
      ],
      modeList: [
        {
          value: 0,
          label: "其他"
        },
        {
          value: 1,
          label: "经销"
        },
        {
          value: 2,
          label: "代销"
        },
        {
          value: 3,
          label: "联营"
        },
        {
          value: 4,
          label: "合营"
        },
        {
          value: 5,
          label: "租赁"
        },
        {
          value: 6,
          label: "扣率代销"
        },
        {
          value: 7,
          label: "购销"
        }
      ],
      statusList: [
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "停用"
        },
        {
          value: 2,
          label: "冻结业务"
        },
        {
          value: 3,
          label: "冻结账款"
        }
      ],
      typeList: [
        {
          value: 1,
          label: "产地供应商"
        },
        {
          value: 2,
          label: "生产厂家"
        },
        {
          value: 3,
          label: "批发市场"
        },
        {
          value: 4,
          label: "种植基地"
        },
        {
          value: 5,
          label: "门店自采"
        },
        {
          value: 6,
          label: "其他"
        }
      ],
      propertyList: [
        {
          value: 1,
          label: "国有"
        },
        {
          value: 2,
          label: "民营"
        },
        {
          value: 3,
          label: "合资"
        },
        {
          value: 4,
          label: "外资"
        },
        {
          value: 5,
          label: "个体"
        }
      ]
    };
  },
  methods: {
    getData() {
      this.getDatas();
      if (this.dialog.dialogType == "edit") {
        let data = {
          id: this.dialog.id
        };
        findSuppliers(data).then(res => {
          if (res.code == 0) {
            this.formData = {
              supplier_name: res.data.info.supplier_name,
              supplier_code: res.data.info.supplier_code,
              mode: res.data.info.mode,
              payment: res.data.info.payment,
              payment_type: res.data.info.payment_type,
              payment_days: res.data.info.payment_days,
              status: res.data.info.status,
              type: res.data.info.type,
              property: res.data.info.property,
              contacts: res.data.info.contacts,
              tel: res.data.info.tel,
              fax: res.data.info.fax,
              mobile: res.data.info.mobile,
              postcode: res.data.info.postcode,
              email: res.data.info.email,
              bank_account_name: res.data.info.bank_account_name,
              bank: res.data.info.bank,
              bank_account: res.data.info.bank_account,
              taxpayer: res.data.info.taxpayer,
              business_license: res.data.info.business_license,
              remarks: res.data.info.remarks,
              operator_code: res.data.info.operator_code,
              operator_name: res.data.info.operator_name,
              code: res.data.info.orgarea_code,
              name: res.data.info.orgarea_name,
              area: res.data.info.orgarea_name,
              supplierclass_code: res.data.info.supplierclass_code,
              supplierclass_name: res.data.info.supplierclass_name,
              address: res.data.info.address,
              address_detail: res.data.info.address_detail,
              country: res.data.info.country,
              send_period: res.data.info.send_period,
              lybo_money: res.data.info.lybo_money,
              rebate_type: res.data.info.rebate_type,
              buy_in_price: res.data.info.buy_in_price,
              zj_number: res.data.info.zj_number,
              pay_type: res.data.info.pay_type
            };
          }
        });
      }
    },
    getDatas() {
      let data = {
        page: 1,
        limit: 500
      };

      //获取初始化区域列表
      getRegionData(data).then(res => {
        if (res.data.paginate) {
          this.insideArea.options = res.data.paginate.map(item => {
            return { value: `${item.code}`, label: `${item.name}` };
          });
        }
      });
    },
    // 搜索区域
    insideRemoteMethods(query) {
      if (query !== "") {
        this.getSupplierLists(query);
      } else {
        this.insideArea.options = [];
      }
    },
    getSupplierLists(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      getRegionData(data).then(res => {
        this.insideArea.list = res.data.paginate.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.insideArea.options = this.insideArea.list.filter(item => {
          this.insideArea.loading = false;
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    getAreaData(res) {
      let arr = this.insideArea.options.filter(data => {
        return data.value == res;
      });
      this.formData.orgarea_code = arr[0].value;
      this.formData.orgarea_name = arr[0].label;
    },
    hideDialog() {
      this.dialog.centerDialogVisible = false;
      this.$refs["form"].resetFields();
      this.formData = {
        supplier_name: "",
        supplier_code: "",
        mode: "",
        payment: "",
        payment_type: "",
        payment_days: "",
        status: "",
        type: "",
        property: "",
        contacts: "",
        tel: "",
        fax: "",
        mobile: "",
        postcode: "",
        email: "",
        bank_account_name: "",
        bank: "",
        bank_account: "",
        taxpayer: "",
        business_license: "",
        remarks: "",
        operator_code: "",
        operator_name: "",
        orgarea_code: "",
        orgarea_name: "",
        supplierclass_code: "",
        supplierclass_name: "",
        address: "",
        address_detail: "",
        country: "",
        send_period: "",
        lybo_money: "",
        rebate_type: "",
        buy_in_price: "",
        zj_number: "",
        pay_type: ""
      };
    },
    //提交
    confirm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = {
            supplier_name: this.formData.supplier_name,
            supplier_code: this.formData.supplier_code,
            mode: this.formData.mode,
            payment: this.formData.payment,
            payment_type: this.formData.payment_type,
            payment_days: this.formData.payment_days,
            status: this.formData.status,
            type: this.formData.type,
            property: this.formData.property,
            contacts: this.formData.contacts,
            tel: this.formData.tel,
            fax: this.formData.fax,
            mobile: this.formData.mobile,
            postcode: this.formData.postcode,
            email: this.formData.email,
            bank_account_name: this.formData.bank_account_name,
            bank: this.formData.bank,
            bank_account: this.formData.bank_account,
            taxpayer: this.formData.taxpayer,
            business_license: this.formData.business_license,
            remarks: this.formData.remarks,
            operator_code: this.formData.operator_code,
            operator_name: this.formData.operator_name,
            orgarea_code: this.formData.orgarea_code,
            orgarea_name: this.formData.orgarea_name,
            supplierclass_code: this.formData.supplierclass_code,
            supplierclass_name: this.formData.supplierclass_name,
            address: this.formData.address,
            address_detail: this.formData.address_detail,
            country: this.formData.country,
            send_period: this.formData.send_period,
            lybo_money: this.formData.lybo_money,
            rebate_type: this.formData.rebate_type,
            buy_in_price: this.formData.buy_in_price,
            zj_number: this.formData.zj_number,
            pay_type: this.formData.pay_type
          };
          if (this.dialog.dialogType == "edit") {
            data.id = this.dialog.id;
            editSuppliers(data).then(res => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: res.msg
                });
                this.hideDialog();
                this.$emit("upData");
              }
            });
          } else {
            addSuppliers(data).then(res => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: res.msg
                });
                this.hideDialog();
                this.$emit("upData");
              }
            });
          }
        }
      });
    },

    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.formList {
  display: flex;
  justify-content: space-around;
}
</style>
